<template>
  <div>
      <div>
        <div class="row-spaceb mg20">
          <p class="fwbold fs-md">· 我发布的需求</p>
          <el-button icon="el-icon-plus"  type="primary" plain size="small" @click="supplyForList">发布需求</el-button>
        </div>
        <el-divider></el-divider>
        <div class="card">
            <el-tabs v-model="activeName" @tab-click="tabClick" type="border-card" class="ml30 mr30 mb30">
              <el-tab-pane :label="item.dictLabel" :name="item.dictValue" v-for="(item, index) in requireApplyStatus" :key="index">
                <el-table v-loading="tableLoading" :data="tableList" style="width: 100%">
                  <el-table-column prop="requirementId" label="需求编号" width="200"></el-table-column>
                  <el-table-column prop="requirement" label="需求名称" width="200"></el-table-column>
                  <el-table-column label="申请时间" prop="requirement" width="180">
                    <template slot-scope="{ row }">
                        {{ formatDate(row.applyTime) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="发布时间" prop="publishTime" width="180">
                    <template slot-scope="{ row }">
                        {{ row.publishTime ? formatDate(row.publishTime) : '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="发布状态" width="200">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status == 0" class="color-red">待处理</span>
                      <span v-if="scope.row.status == 1" class="color-success">已发布</span>
                      <div v-if="scope.row.status == 2" class="status-wrapper">
                        <span class="color-red">退回修改</span>
                        <el-tooltip :content="scope.row.finalComment || scope.row.firstComment" placement="top">
                          <p class="feedback-text">{{ scope.row.finalComment || scope.row.firstComment }}</p>
                        </el-tooltip>
                      </div>
                      <span v-if="scope.row.status == 3" class="color-red">审核不通过</span>
                      <span v-if="scope.row.status == 4" class="color-warning">待审核</span>
                      <span v-if="scope.row.status == 5" class="color-red">关闭需求</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="响应状态" prop="serviceCount">
                    <template slot-scope="{ row }">
                        目前已有{{row.serviceCount }} 企业对接
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" fixed="right" width="120px">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 2" type="text" @click="btnClick(scope.row, scope.$index, 'edit')">编辑</el-button>
                        <el-button v-else type="text" @click="btnClick(scope.row, scope.$index, 'view')">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <el-pagination class="pagination_box" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="pageData.currentPage"
                                :page-sizes="[100, 200, 300, 400, 500]"
                                :page-size="pageData.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                hide-on-single-page
                                :total="pageData.totalPage">
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
        </div>
      </div>
  </div>
</template>
<script>
import {requirementPagePrivate} from "@/api/homeApi";
import {mapGetters} from "vuex";
import moment from 'moment'
export default {
  components: {
  },
  data () {
    return {
        moment,
      isHaveInfo: true,
      tableLoading: false,
      listData: [],
      activeName: 'all',
      requireApplyStatus: [
        {"dictLabel": "全部","dictValue": "all"},
        {"dictLabel": "待处理","dictValue": "0"},
        {"dictLabel": "已发布","dictValue": "1"},
        {"dictLabel": "退回修改","dictValue": "2"},
        {"dictLabel": "审核不通过","dictValue": "3"},
        {"dictLabel": "待审核","dictValue": "4"},
        {"dictLabel": "关闭需求","dictValue": "5"}
        ],
      pageData: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0
      },
      tableLoading: false,
      tableList:[
        
      ],
      supplyDialogVisible: false
    }
  },
  computed: {
    commonDict() {
      return this.$store.state.common.commonDict
    },
    ...mapGetters(['userInfo']),
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    // 申请发布
    supplyForList() {
        this.$router.push({name:'发布需求'})
    },
    tabClick(val) {
      if(val.name === 'all') {
        this.getTableList()
      } else if(val.name === '0'){
        this.getTableList(0)
      } else if(val.name === '1'){
        this.getTableList(1)
      } else if(val.name === '2'){
        this.getTableList(2)
      } else if(val.name === '3'){
        this.getTableList(3)
      }else if(val.name === '4'){
        this.getTableList(3)
      }else if(val.name === '5'){
        this.getTableList(3)
      }
    },
    handleSizeChange(val) {
      this.$set(this.pageData, 'pageSize', val)
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.$set(this.pageData, 'currentPage', val)
      this.getTableList()
    },
    getTableList(status='') {
       this.tableLoading = true
       requirementPagePrivate({
         pageNo: this.pageData.currentPage,
         pageNum: this.pageData.pageSize,
         status
       }).then(res => {
         if (res.code === 200) {
           this.tableList = [...res.rows] 
         }
       }).finally(() => {
         this.tableLoading = false
       })
    },
    btnClick(row, index, type) {
        if(type === 'edit'){
            this.$router.push({name:'发布需求', query: {id: row.requirementId}})
        } else {
            this.$router.push({name:'需求详情', query: {id: row.requirementId}})
        }
    }
  }
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
:deep .el-divider--horizontal{
  margin: 12px 0;
}
:deep .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom-color: #D32521;
}
:deep .el-table thead{
  color: #000;
}
.status-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feedback-text {
  margin: 0;
  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
